<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        #app {
            width: 600px;
            margin: 10px auto;
        }

        .tb {
            border-collapse: collapse;
            width: 100%;
        }

        .tb th {
            background-color: #0094ff;
            color: white;
        }

        .tb td,
        .tb th {
            padding: 5px;
            border: 1px solid black;
            text-align: center;
        }

        .tb img {
            width: 100px;
            height: 100px;
        }

        .add {
            padding: 5px;
            border: 1px solid black;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="handleReverse">反选</button>

        <table class="tb">
            <thead>
                <tr>
                    <th>
                        <input :checked="isAll" type="checkbox" name="" id="" @change="handleInputAllChange" />
                    </th>
                    <th>产品图片</th>
                    <th>编号</th>
                    <th>品牌名称</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
            </thead>

            <tbody>
                <tr v-for="item in products">
                    <td>
                        <!-- $event 特殊变量，表示的就是事件对象 -->
                        <input :checked="checkedIds.includes(item.id)" type="checkbox"
                            @change="handleInputChange(item.id, $event)" />
                    </td>
                    <td>
                        <img v-bind:src="item.imgSrc" alt="" />
                    </td>
                    <td>{{ item.id }}</td>
                    <td>{{ item.productName }}</td>
                    <td>{{ item.price }}</td>
                    <td>
                        <button @click="handleChange(item, 'decrement')">-</button>
                        {{ item.count }}
                        <button v-bind:disabled="item.count === 5" @click="handleChange(item, 'increment')">+</button>
                    </td>
                    <td>
                        <button @click="handleDelete(item.id)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>


    <script type="module">
        import { createApp } from './lib/vue3.esm.browser.js'

        createApp({
            data() {
                return {
                    checkedIds: [], // 用于存放当前勾选的商品Id集合

                    products: [
                        {
                            id: 1,
                            code: 1,
                            imgSrc: "https://hello-1253323335.cos.ap-guangzhou.myqcloud.com/pic_1.jpeg",
                            productName: "坤坤的背带裤",
                            price: 9.9,
                            count: 1
                        },
                        {
                            id: 2,
                            code: 2,
                            imgSrc: "https://hello-1253323335.cos.ap-guangzhou.myqcloud.com/pic_2.jpeg",
                            productName: "品如的衣服",
                            price: 19.9,
                            count: 1
                        },
                        {
                            id: 3,
                            code: 3,
                            imgSrc: "https://hello-1253323335.cos.ap-guangzhou.myqcloud.com/pic_3.jpeg",
                            productName: "秀儿的秋裤",
                            price: -9.9,
                            count: 1
                        },
                    ]
                }
            },

            computed: {
                // 是否全选
                //      依赖项；checkedIds 、products
                // isAll() {
                //     return this.checkedIds.length === this.products.length
                // }

                isAll: {
                    get() {
                        return this.checkedIds.length === this.products.length
                    },

                    // this.isAll = true | false
                    set(value) {
                        if (value) {
                            this.checkedIds = this.products.map(item => item.id)
                        } else {
                            this.checkedIds = []
                        }
                    }
                }
            },

            methods: {
                handleDelete(id) {
                    console.log('handleDelete', id)

                    // 1. 根据 id 找到这条数据在 products 中的下标
                    const index = this.products.findIndex((item) => item.id === id)
                    console.log('index', index)

                    // 2. 使用 splice 方法来修改数组
                    this.products.splice(index, 1)
                },


                handleChange(item, type) {
                    console.log('item', item.productName)
                    if (type === 'increment') {
                        // ++
                        item.count++
                    } else if (type === 'decrement') {
                        // --
                        if (item.count <= 1) {
                            // 如果当前为 1, 减少则直接删除这条数据
                            this.handleDelete(item.id)
                            return
                        }
                        item.count--
                    } else {
                        console.error('操作有误')
                    }
                },


                // handleInputChange(item.id, $event)
                handleInputChange(id, event) {
                    console.log('handleInputChange id', id)
                    console.log('handleInputChange event', event)

                    // 1. 获取当前的 checked
                    const checked = event.target.checked

                    // 2. 判断 checked 为 true, 则将 id 追加到 checkedIds 中
                    //                 为 false, 则从 checkedIds 中移除

                    if (checked) {
                        this.checkedIds.push(id)
                    } else {
                        this.checkedIds = this.checkedIds.filter(item => item !== id)
                    }
                },

                // handleInputChange(item.id)
                handleInputChangeTwo(id) {
                    // id 在 checkedIds 中，就移除，否则追加
                    if (this.checkedIds.includes(id)) {
                        this.checkedIds = this.checkedIds.filter(item => item !== id)
                    } else {
                        this.checkedIds.push(id)
                    }
                },


                handleInputAllChange(event) {
                    // if (event.target.checked) {
                    //     // 勾选
                    //     //      将 products 的每一项的 id 写入到 checkedIds 中
                    //     this.checkedIds = this.products.map(item => item.id)
                    // } else {
                    //     // 不勾选
                    //     //      checkedIds = []
                    //     this.checkedIds = []
                    // }

                    
                    // 将勾选状态直接赋值给计算属性 isAll
                    this.isAll = event.target.checked
                },

                // 反选
                handleReverse() {
                    // checkedIds []
                    // products.map(item => item.id)

                    // checkedIds [1]       => [2, 3]
                    // products.filter().map(item => item.id)

                    // 1. 将在checkedIds中的给移除
                    // const tmp = this.products.filter(item => !this.checkedIds.includes(item.id))
                    // 2. 将 tmp 映射赋值给 checkedIds
                    // this.checkedIds = tmp.map(item => item.id)


                    this.checkedIds = this.products.filter(item => !this.checkedIds.includes(item.id)).map(item => item.id)
                }
            }
        }).mount("#app");
    </script>
</body>

</html>